<template>
	<div class="page pageBackground">
		<custom-box title="登录">
			<div class="login_form">
				<el-form :model="form" :rules="rules" ref="ruleForm">
					<div class="login_form_item">
						<el-form-item label="手机号码" prop="phone">
							<el-input type="number" v-model="form.phone"></el-input>
						</el-form-item>
					</div>
					<div class="login_form_item">
						<el-form-item label="验证码" prop="code">
							<el-input type="number" v-model="form.code"></el-input>
						</el-form-item>
						<div class="verification" @click="handleCode">获取验证码</div>
					</div>
					<div class="login_form_item">
						<div class="checkbox-box" @click="checked=!checked">
							<div class="checkbox" :class="{'checked':checked}"></div>
							<div style="height: 0.8rem;">同意我们<span @click.stop="$enter('/Login/userAgreement')">《用户协议》</span><span @click.stop="$enter('/Login/privacyPolicy')">《隐私政策》</span> ，并授权使用您的账号信息(如昵称、头像、电话)</div>
						</div>
					</div>
				</el-form>
				<div class="submit" @click="submitForm('ruleForm')">登录</div>
			</div>
		</custom-box>
	</div>
</template>

<script>
import { getCode, login } from "../../api/modules/user";
import { init } from '../../util/getData';
	export default {
		name:'login',
		data() {
			return {
				checked: true,
				form: {
					phone: '14757922577',
					code: '888666',
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleCode() {
				if (!this.form.phone) {
					uni.showToast({
						title: `请输入手机号码！`,
						icon: 'none',
						duration: 2000
					})  
					return;
				}
				let data = {
					phone: this.form.phone,
					action: 'regist'
				}
				getCode(data).then(res => {
					const { code, message, data  } = res || {}
					if (code === 200) {
						uni.showToast({
							title: `${data}`,
							icon: 'none',
							duration: 2000
						})  
					} else {
						uni.showToast({
							title: `${message}`,
							icon: 'none',
							duration: 2000
						})  
					}
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						const { phone, code } = this.form || {}

						login({
							code,
							name: phone
						}).then(res => {
							const { code, data, message } = res || {}
							console.log('登录; res', res)
							if (code === 200) {
								uni.setStorage({
									key: 'token',
									data: res.data.token
								})
								getApp().globalData.token = res.data.token
								getApp().globalData.loginForm = this.form;
								getApp().globalData.glbCurrentDataMap = res.data;

								init({jumpHome: true, enterHome: true}); // 获取全局的数据
								// 	// this.$router.replace('/') // 登录成功
								
							} else {
								uni.showToast({
									title: `${message}`,
									icon: 'none',
									duration: 2000
								})  
							}
						})

						
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.login_form {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 0.28rem 1.1rem;

	}

	.login_form_item {
		margin-top: 0.3rem;
		position: relative;
		display: block;
	}

	.verification {
		cursor: pointer;
		padding: .13rem .4rem;
		background-image: linear-gradient(to right, #FFC500, #FF5F01);
		color: #fff;
		font-size: .24rem;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-30%);
		border-radius: 50px;
	}

	.checkbox-box {
		font-size: .24rem;
		color: #909399;
		line-height: 1.8;
		position: relative;
		padding-left: .6rem;

		.checkbox {
			position: absolute;
			width: .28rem;
			height: .28rem;
			border: 2px solid #848484;
			left: 0;
			top: 0.08rem;
			border-radius: 50%;

			&.checked {
				background-color: #FD4933;
				border-color: #FD4933;
			}

			&.checked::after {
				content: '\2713';
				color: #fff;
				display: block;
				font-size: 0.2rem;
				text-align: center;
				line-height: 0.24rem;
			}
		}

		span {
			color: #FD4933;
		}
	}

	.submit {
		width: 5rem;
		line-height: .68rem;
		text-align: center;
		border-radius: .34rem;
		color: #fff;
		font-size: .24rem;
		margin: auto;
		margin-top: .37rem;
		background-image: linear-gradient(to right, #FFC500, #FF5F01);
	}
</style>